<template>
  <el-card>
    <!-- 粉丝列表 -->
    <el-table :data="fanList" border style="width: 100%" v-loading="loading">
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="120"
      ></el-table-column>
      <el-table-column prop="userName" align="center" label="用户名">
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="360">
        <template #default="scope">
          <el-tooltip content="查看个人主页" placement="top" :enterable="false">
            <!-- 查看帖子按钮 -->
            <el-button
              size="mini"
              type="success"
              :icon="View"
              @click="toUserArea(scope.row.userId, scope.row.userName)"
              >查看个人主页</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { View } from '@element-plus/icons-vue'
import { Base64 } from 'js-base64';
import { ref, getCurrentInstance, ComponentInternalInstance, onMounted, reactive } from 'vue';

const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const proxy = appContext.config.globalProperties;

// 粉丝列表
const fanList = ref([]);
// 获取粉丝列表的页码参数对象
const queryInfo = reactive({
  // 当前的页数
  pageNum: 1,
  // 当前每页显示的数据条数
  pageSize: 1,

})
// 粉丝列表总条数
const total = ref(0);
// 是否正在加载
const loading = ref(true);

onMounted(() => {
  getFanList();
})

// 获取粉丝列表
function getFanList() {
  loading.value = true;
  proxy.$request.follow
    .myfans({
      userId: proxy.$storage.getItem('userInfo').userId,
      pageNum: queryInfo.pageNum,
      pageSize: queryInfo.pageSize,
    })
    .then((res: any) => {
      if (res.data.total === 0) {
        loading.value = false;
        return ElMessage({
          message: '暂时没有人关注你呦',
          type: 'warning',
          duration: 1000,
        });
      }
      total.value = res.data.total;
      fanList.value = res.data.list;
      loading.value = false;
    });
};
// 监听 pagesize 改变
function handleSizeChange(newSize: any) {
  queryInfo.pageSize = newSize;
  getFanList();
};
// 监听页码值改变
function handleCurrentChange(newNum: any) {
  queryInfo.pageNum = newNum;
  getFanList();
};
// 跳转到用户专区
function toUserArea(userId: any, userName: any) {
  // 用户id加密
  var i = Base64.encodeURI(userId);
  // 用户名加密
  var n = Base64.encodeURI(userName);
  proxy.$router.push({
    path: '/contentManage',
    query: { i, n },
  });
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 10px;
}
</style>
